import * as React from 'react';
import * as ReactDOM from 'react-dom';


    var kk = true;
    var LeftMenu = React.createClass({
        getInitialState:function(){
            return {
                isShow:true,
                isShowIndex:0
            }
        },
        ulClick: function (i) {
            this.setState({
                isShow:true,
                isShowIndex:i
            })
        },
        handleClick: function (sub, i) {

        },
        render: function () {
            var items = this.props.items,isShow = false;
            if (items && items.CAIGOU) {
                items = items.CAIGOU[0].children;
                return (
                    <ul className="navigation-ul">
                        {items.map(function (item, j) {
                            isShow = this.state.isShowIndex==j?this.state.isShow:false;
                            return (
                                <Li isShow={isShow} key={j} index={j} item={item} history={this.props.history} ulClick={this.ulClick} />
                            )
                        }, this)}
                    </ul>
                )
            } else {
                return (
                    <div>没有权限</div>
                )
            }
        }
    });

    var Li = React.createClass({
        getDefaultProps: function () {
            return {
                href: {
                    0: "",
                    1: "one",
                    2: "two",
                    3: "three",
                    4: "four"
                }
            };
        },
        handleClick: function (sub, i) {
            let url = sub.sref;
            url = '/' + url.slice(url.indexOf('.') + 1).split('.').join('/');
            this.props.history.push({pathname: url, state: {title: sub.title}});
        },
        ulClick:function(){
            this.props.ulClick(this.props.index);
        },
        render: function () {
            var item = this.props.item;
            var subTitle = this.props.item.children;
            var ulClass = "navigation-ul-ul"+(this.props.isShow?" ":" hidden");
            var iconClass="iconfont "+(this.props.isShow?"icon-contenticondown":"icon-leftbariconarrowdown");
            return (
                <li className="navigation-li" onClick={this.ulClick}>
                <span className="navigation-ul-span">
                    {item.heading}
                    <span className={iconClass}></span>
                </span>
                    <ul className={ulClass}>
                        {subTitle.map(function (sub, j) {
                            return (
                                <li onClick={this.handleClick.bind(this,sub,j)} className="navigation-ul-ul-li sub-select" key={j}>
                                    <span className="navigation-ul-ul-li-span">{sub.title} </span>
                                </li>
                            )
                        }, this)}
                    </ul>
                </li>
            )
        }
    });

module.exports = LeftMenu;